<template>
	<!--中奖说明组件-->
	<div class="box">
		<div class="wrap-box">
			<div class="center-box">
				<div class="top-box">
					<img @click="clickCloseWinExplain" src="../../assets/images/choujiang/cj-arrow.png" />
					<p>中奖说明</p>
				</div>
				<div class="connect">
					<p class="prize-name">{{locWinInfo.prizeNm}}</p>
					<ul class="connect-ul">
						<li v-if="locWinInfo.prizeType=='2'">
							<p class="first-p">券码</p>
							<p class="last-p">{{locWinInfo.ticketNo}}</p>
						</li>
						<li>
							<p class="first-p">有效期</p>
							<p class="last-p">{{locWinInfo.effeStartTime}} 至 {{locWinInfo.effeEndTime}}</p>
						</li>
						<!--<li>
						<p class="first-p">来自直播</p>
						<p class="last-p">{{roomInfo.roomInfo.title||'太君没有提供接口字段'}}</p>
					</li>-->
					</ul>
					<hr />
					<div class="footer-text">
						{{locWinInfo.winDesc}}
					</div>
				</div>
				<div class="leave-for-btn" @click="clickLink" v-if="locWinInfo.forwardBtn">
					点击前往
				</div>
			</div>
			<div class="close" @click="closeWinExplain"></div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			winInfo: Object,
			fromCom: String, //来自
			roomInfo: Object,
		},
		data() {
			return {
				locWinInfo: this.winInfo,
			}
		},
		created() {
		},
		methods: {
			clickLink() {
				if (window.terminal.weixin) {
					window.location.href = this.locWinInfo.forwardWxLink;
				} else {
					if (this.locWinInfo.forwardAppLink) {
						if (this.fromCom == 'fromLivePrizeCom') {
							const item = {
								'link':this.locWinInfo.forwardAppLink,
								'linkType':1
								}
							fun.linkUrlFloatVideo(item)
						} else {
							if(window.terminal.isZxjtqhApp){
								fun.zxjtqhLinkUrl(this.locWinInfo.forwardAppLink)
							}else{
								window.location.href = this.locWinInfo.forwardAppLink;
							}  
						}
					}
				}
			},
			clickCloseWinExplain() {
				this.$emit('formChildMsg', {
					type: 'closeWinExplain',
					data: 'ruan'
				})
			},
			closeWinExplain() {
				this.$emit('formChildMsg', {
					type: 'closeFooterWinExplain',
					data: 'ruan'
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.leave-for-btn {
		width: 189px;
		height: 58px;
		background: #FFF5EE;
		border-radius: 10px;
		margin: 15px auto;
		font-size: 28px;
		font-weight: 500;
		color: #FF4645;
		line-height: 58px;
		text-align: center;
	}

	.wrap-box {
		width: 100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}

	.footer-text {
		text-indent: 50px;
		color: #8E726F;
		font-size: 24px;
	}

	.first-p {
		width: 120px;
		color: #9C7B74;
		font-size: 26px;
	}

	.last-p {
		flex: 1;
		/*background: saddlebrown;*/
		color: #613A3A;
		font-size: 26px;
	}

	.connect-ul li {
		display: flex;
		margin-top: 20px;
		font-weight: 600;
	}

	hr {
		border: 1px solid transparent;
		border-bottom: 2px dotted #DFB99E;
		margin: 35px 0;
	}

	.prize-name {
		color: #613A3A;
		font-size: 34px;
		font-weight: 600;
		margin-bottom: 40px;
	}

	.box {
		width: 100vw;
		height: 100vh;
		/*background: salmon;*/
		/*background: rgba(0, 0, 0, .4);*/
		margin: 0 auto;
		position: absolute;
		z-index: 1010;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.center-box {
		width: 561px;
		height: 810px;
		background: linear-gradient(-45deg, #FF6262 0%, #FF7878 100%);
		border: 2px solid #FED8C0;
		border-radius: 17px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;

	}

	.top-box {
		width: 100%;
		height: 70px;
		/*background: sandybrown;*/
		margin-top: 10px;
		position: relative;
	}

	.top-box img {
		width: 69px;
		height: 69px;
		position: absolute;
		top: 0;
		left: 32px;
	}

	.top-box p {
		line-height: 70px;
		text-align: center;
		font-size: 38px;
		font-weight: 500;
		color: #FFFFFF;
	}

	.connect {
		width: 492px;
		height: 572px;
		background: #FFF5EE;
		border-radius: 6px;
		margin-bottom: 10px;
		overflow-y: scroll;
		color: #8E726FFF;
		font-size: 24px;
		line-height: 38px;
		padding: 35px 26px 0;
		text-align: justify;
	}

	.close {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: calc(50% - 31.5px);
	}
</style>
